<template>
    <el-dialog :close-on-click-modal="false" :title="titleMap[mode]" v-model="visible" :width="700" destroy-on-close @closed="$emit('closed')" custom-class="custom-dialog">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="right">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" clearable :maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="portrait">
                <sc-upload v-model="form.portrait" title="上传头像" cropper :aspectRatio="1/1"></sc-upload>
            </el-form-item>
            <el-form-item label="账号" prop="account">
                <el-input v-model="form.account" placeholder="请输入账号" clearable :maxlength="30" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号" clearable :maxlength="11" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="identity">
                <el-radio-group v-model="form.identity">
                    <el-radio :label="1">普通管理员</el-radio>
                    <el-radio :label="2">超级管理员</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="角色" prop="role" v-if="form.identity==1">
                <el-select v-model="form.role" multiple placeholder="请选择角色" clearable filterable>
                    <el-option v-for="option in roleItems" :key="option.id" :label="option.name" :value="option.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="密码" v-if="form.id">
                <el-input v-model="form.password" placeholder="请输入密码" clearable :maxlength="15" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-else>
                <el-input v-model="form.password" show-password placeholder="留空为不修改" clearable :maxlength="15" show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">取 消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { checkMobile } from '@/utils/validate'
export default {
    emits: ['success', 'closed'],
    props: {
        rolelist: { type: Array, default: () => [] },
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增管理员',
                edit: '编辑管理员',
                show: '查看'
            },
            visible: false,
            isSaveing: false,
            roleItems: [],
            form: this.getDefaultRuleForm(),
            rules: {
                portrait: [
                    { required: false, message: '请上传头像' }
                ],
                name: [
                    { required: true, message: '请输入姓名' }
                ],
                identity: [
                    { required: true, message: '请输入身份' }
                ],
                account: [
                    { required: true, message: '请输入账号' }
                ],
                password: [
                    { required: true, message: '请输入密码' },
                    { min: 6, max: 15, message: '密码为6-15位', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, validator: checkMobile }
                ],
                role: [
                    { required: true, message: '请选择角色' }
                ],
            }
        }
    },
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            if (mode == 'add') {
                this.resetForm()
            }
            this.visible = true;
            this.roleItems = this.rolelist;
            return this
        },
        resetForm() {
            this.form = this.getDefaultRuleForm()
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (!valid) {
                    return false
                }
                try {
                    let res = null
                    this.isSaveing = true;
                    if (this.mode == 'add') {
                        res = await this.$API.system.user.action.post(this.form)
                    } else {
                        res = await this.$API.system.user.action.put(this.form)
                    }
                    this.isSaveing = false;
                    if (res.error == 0) {
                        this.visible = false
                        this.$emit('success', this.form, this.mode)
                        await this.$API.auth.user.get().then(user => {
                            if (user.error === 0) {
                                this.$store.commit('userInfo', user.data)
                                this.$TOOL.data.set("B_USER_INFO", user.data)
                            }
                        })
                        this.$notify.success("保存成功")
                    }
                } catch (error) {
                    this.isSaveing = false;
                }
            })
        },
        //表单注入数据
        async setData(data) {
            let _form = {
                id: data.id,
                name: data.name,
                identity: data.identity ? data.identity.value : '',
                portrait: data.portrait ? data.portrait.url : '',
                account: data.account,
                mobile: data.mobile,
                status: data.status ? data.status.value : '',
                password: '',
                role: []
            }
            data.roles.forEach(item => {
                _form.role.push(item.id)
                
                let isExist = this.roleItems.find((row) => {return row.id == item.id})
                if (!isExist) {
                    this.roleItems.push(item)
                }
            })

            this.form = _form
        },
        getDefaultRuleForm() {
            return {
                id: null,
                name: "",
                identity: 1,
                portrait: "",
                account: "",
                password: "",
                mobile: "",
                role: [],
                status: 1
            }
        }
    }
}
</script>

<style lang="scss">
.el-cascader {
	width: 100%;
}
.imgbox {
    width: 120px;
    height: 120px;
    img {
        width: 100%;
    }
}
</style>
